<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:任务实例
* @fileName:TaskInstance.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-13
!-->
<script setup lang="ts">
// 引入任务实例查询组件
import InstanceSearch from "./components/instance-search.vue";
// 引入任务实例详情组件
import InstanceDetails from "./components/instance-details.vue";
// 引入任务实例分页
import InstancePagination from "@/components/common/pagination.vue";
// 引入任务实例详情弹窗
import InstanceDrawer from "./components/drawer/instance-drawer.vue";
//引入匹配方法
import StateEnum from "@/common/enum/state-enum";
import LevelEnum from "@/common/enum/level-enum";
import TypeEnum from "@/common/enum/type-enum";
import { ref, reactive, onMounted } from "vue";
//引入API封装方法
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { showErrorMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;

const route = useRoute();

//控制详情弹窗显隐
const drawershow = ref(false);
const direction = ref("rtl");
const detailsParam = ref(null);
const drawerWidth = ref(740);
//详情数据
const listData = reactive({
  tableData: [],
  total: 0,
  status: route.query.status,
  isListLoading: true,
});

// 定义请求数据
let reqData = {
  taskPlanId: "",
  keyword: "",
  status: "",
  beginTime: "",
  endTime: "",
  page: 1,
  pageSize: 10,
};
const dataShow = ref(false);

/**
 * @description:查询方法
 * @param {any} serachParam
 * @return void
 */
const searchFunc = (serachParam: any) => {
  // 查询方法实现
  reqData.keyword = serachParam.userValue;
  reqData.status = serachParam.status;
  reqData.beginTime = serachParam.beginTime;
  reqData.endTime = serachParam.endTime;
  reqTableList();
};

/**
 * @description:获取当前分页页码
 * @param {number} pageNumber
 * @return void
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 改变每页显示数量
 * @param pageNumber 页码
 * @reture viod
 */
const changePageSize = (pageNumber: number) => {
  reqData.pageSize = pageNumber;
  reqTableList();
};

/**
 * @description:获取列表请求方法
 * @return void
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/task/instance/queryPage`,
    params: {
      page: reqData.page,
      size: reqData.pageSize,
    },
    data: {
      keyword: reqData.keyword,
      status: reqData.status,
      beginTime: reqData.beginTime,
      endTime: reqData.endTime,
      taskPlanId: reqData.taskPlanId,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      listData.tableData = res.data.records;
      listData.tableData.map((item: any) => {
        item.logLevel = LevelEnum.getEnumByVal(item.logLevel);
        item.state = StateEnum.getEnumByVal(item.status);
        item.taskResourceType = TypeEnum.getEnumByVal(item.taskResourceType);
      });
      setTimeout(() => {
        listData.isListLoading = false;
      }, 200);
      listData.total = Number(res.data.total);
      if (listData.total > 0) {
        dataShow.value = true;
      } else {
        dataShow.value = false;
      }
    }
  });
  res.catch((error: any) => {
    listData.isListLoading = false;
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

/**
 * @description:详情弹窗方法
 * @param {any} detailsParamV
 * @return void
 */
const detailsFunc = (detailsParamV: any) => {
  drawerWidth.value = 740;
  drawershow.value = true;
  detailsParam.value = detailsParamV;
};

/**
 * @description:改变弹窗宽度
 * @param {any} drawerParam
 * @return void
 */
const drawerFunc = (drawerParam: any) => {
  if (drawerParam === "步骤度量") {
    drawerWidth.value = 1300;
  } else {
    drawerWidth.value = 740;
  }
};
onMounted(() => {
  // 初始化加载树形结构
  reqTableList();
});
</script>

<template>
  <div class="page-list">
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <instance-search
        :searchFunc="searchFunc"
        :status="listData.status"
        :isSearchLoading="listData.isListLoading"
      ></instance-search>
      <!-- 列表详情 -->
      <instance-details
        :tableData="listData.tableData"
        :detailsFunc="detailsFunc"
        :dataShow="dataShow"
        :isListLoading="listData.isListLoading"
      ></instance-details>
      <!-- 分页 -->
      <instance-pagination
        :total="listData.total"
        :pageSize="reqData.pageSize"
        :changePageSize="changePageSize"
        :getCurrentPageNumber="getCurrentPageNumber"
      ></instance-pagination>
    </div>
    <el-dialog
      v-model="drawershow"
      v-if="drawershow"
      title="详情"
      :width="drawerWidth"
      :direction="direction"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 新增弹窗 -->
      <instance-drawer
        :detailsParam="detailsParam"
        :drawerFunc="drawerFunc"
      ></instance-drawer>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.page-list {
  background-color: #fff;
  position: relative;
  padding: 15px;
  height: calc(100vh - 130px);
  :deep(.el-dialog__header) {
    margin: 0px !important;
    border-bottom: 1px solid #ccc;
  }
}
</style>
